// General styles

*, *:before, *:after {
    box-sizing: border-box;
}

a, a:focus, a:active {
    text-decoration: none;
}

html {
    height: 100%;
    font-size: @base-font-size;
}

body {
    .flex-display();
    .flex-direction(column); // vertically stack sections
    .align-items(center); // horizontally center all sections
    .justify-content(flex-start); // start sections at the top
    width: 100%;
    min-height: 100%;
    font-weight: 400;
    font-family: @body-font-stack;
    color: @black-content;
    line-height: 1.6;
    text-rendering: optimizeLegibility !important;
}

@media (min-width: @wide-1-breakpoint) {
    body {
        .justify-content(center); // vertically center all sections
    }

    .non-narrow {
        &.zero-top-spacing {
            padding-top: 0 !important;
        }
    }
}

// * Sections – the cornerstone of page elements
// * Container – contains section contents
//
// Both classes are flex elements

section {
    .flex-display();
    // Sections position their containers centrally, with spacing to the sides
    // The containers can then move their children around as needed.
    .justify-content(center);
    .align-items(center);
    width: 100%;
}

.container {
    .flex-display();
    width: 100%;
}

// Introduced for https://github.com/nishanths/cocoa-hugo-theme/issues/7.
.container .content {
  width: 100%;
}

@media (min-width: @wide-1-breakpoint) {
    section {
        padding: 0 @vspacing/2;
        margin-left: 100px;
        margin-right: 100px;
        max-width: 750px;
    }
}

// Sections order

section.header {
    .flex-order(0);
}
section.icons {
    .flex-order(1);
}
section.main {
    .flex-order(2);
}

@media (min-width: @wide-1-breakpoint) {
    section.header {
        .flex-order(0);
    }
    section.icons {
        .flex-order(2);
    }
    section.main {
        .flex-order(1);
    }
}

// Styles for sections and contents
// Header section

section.header {
    background-color: @background;

    .container {
        .align-items(center);
        .justify-content(center);
    }

    .content {
        .flex-display();
        .flex-direction(column);
        .align-items(center);
    }

    .avatar {
        border-radius: 50%;
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
        max-width: 50px;
    }

    .name {
        .heading();
        .tt-upper();
        color: @compensated-black;
    }

    h3.self-intro {
      .heading(1em);
      font-weight: 400;
      color: @compensated-black;
      margin-bottom: 1rem;
    }

    nav {
        font-size: 14px;
        margin-bottom: floor(@vspacing/2);
        text-transform: uppercase;
        font-family: @heading-font-stack;

        ul {
            list-style: none;
            text-align: center;
            .flex-display(inline-flex);
        }

        ul li {
            margin-left: 6px;
            margin-right: 6px;

            &:first-child {
                margin-left: 0;
            }

            &:last-child {
                margin-right: 0;
            }
        }

        ul a {
            color: @compensated-black;
            font-weight: 500;
            .transition(~'color @{transition-speed-1} @{in-sine}');

            &:hover {
                color: @compensated-black-hover;
            }
        }
    }
}

@media (min-width: @wide-1-breakpoint) {
    section.header {
        background-color: transparent;

        .container {
            .justify-content(flex-start);
        }

        .content {
            .align-items(flex-start);
        }

        .name {
            color: @black;
        }

        nav {
            font-size: 14px;
            margin-bottom: 0;

            ul {
                text-align: left;
            }

            ul a {
                color: @gray;

                &:hover {
                    color: @black;
                }
            }
        }
    }
}

// Icons

section.icons {
    background-color: @background;

    .container {
        .align-items(center);
        .justify-content(center);
    }

    .content {
        width: auto;

        a {
            margin-left: 6px;
            margin-right: 6px;
            opacity: 0.6;
            .transition(~'opacity @{transition-speed-1} @{in-sine}');

            &:first-child {
                margin-left: 0;
            }

            &:last-child {
                margin-right: 0;
            }

            &:hover {
                opacity: 0.8;
            }

            .icon {
                width: 16px;
                height: 16px;
            }
            .flag {
                border-radius: 50%;
            }
        }
    }
}

@media (min-width: @wide-1-breakpoint) {
    section.icons {
        background-color: transparent;

        .container {
            .justify-content(flex-start);
        }

        .content {
            a {
                margin-left: 3px;
                margin-right: 3px;
            }

        }
    }
}

// Main section

section.main {
    .container {
        .align-items(center);
        .justify-content(flex-start);
    }

    .content {
        color: @black-content;
        font-size: @base-font-size;

        .title-container {
            .flex-display();
            .justify-content(space-between);

            .initials {
                display: none;
                .heading();
                .tt-upper();
                color: @gray;

                a {
                    color: @gray;
                    .transition(~'color @{transition-speed-1} @{in-sine}');

                    &:hover {
                        color: @black;
                    }
                }
            }
        }

        .page-heading {
            .heading();
            .tt-upper();
            margin-bottom: floor(@vspacing/2);
        }

        .front-matter {
            .page-heading {
                margin-bottom: 0;
            }

            .meta {
                .meta();
                .flex-display();
                margin-bottom: @vspacing;
            }

            .date, .word-count, .reading-time .middot {
                display: none;
            }

            .middot {
                font-size: 6px;
                margin: 0 6px;
                display: inline;
                vertical-align: middle;

                &:before {
                    content: "•";
                }
            }
        }
    }
}

@media (min-width: @wide-1-breakpoint) {
    section.main {
        .content {
            .front-matter {
                .date, .word-count, .reading-time .middot {
                    display: initial;
                }
            }

            .title-container {
                .initials {
                    display: none;
                }
            }
        }
    }
}

// 404 page

section.main {
    .container.f04 {
        .justify-content(center);

        .content {
            .flex-display();
            .flex-direction(column);
            .align-items(center);

            .num {
                margin: 30px 0px 30px 0;
                font-weight: 200;
                font-family: @special-font-stack-1;
                font-size: 50px;
            }

            .detail {
                margin-bottom: 40px;
            }
        }
    }
}

@media (min-width: @wide-1-breakpoint) {
    section.main {
        .container.f04 {
            .justify-content(flex-start);

            .content {
                .align-items(flex-start);

                .num {
                    margin: 0 0 10px 0;
                    font-size: 32px;
                }

                .detail {
                    margin-bottom: 30px;
                }
            }
        }
    }
}

// Post item

section.main {
    .container {
        .content {
            .post-item {
                .flex-display();
                .align-items(center);
                display: list-item;
                list-style: disc inside;

                .meta {
                    .meta();
                    display: none;

                    min-width: 100px;
                    text-align: right;
                    margin-right: @vspacing/2;
                }
            }
            .no-bullet {
                    color: transparent;
                    font-style: oblique;
		    margin-top: 2rem;
		    margin-bottom: 1rem;
            }
            .no-bullet .date {
                    .heading();
                    .light();
                    font-style: normal;
            }
        }
    }
}

// Spacing

section {
    padding: 0 @vspacing/2;
}

section.header {
    padding-top: @vspacing;
    padding-bottom: floor(@vspacing/2);
}

section.icons {
    padding-top: 0;
    padding-bottom: @vspacing;
}

section.main {
    padding-top: @vspacing;
    padding-bottom: @vspacing;
}

@media (min-width: @wide-1-breakpoint) {
    @vspacing: 60px;

    .container {
        margin: 0 @vspacing/2;
    }

    section.header {
        padding-top: @vspacing;
        padding-bottom: @vspacing;
    }

    section.icons {
        padding-top: @vspacing;
        padding-bottom: @vspacing;
    }

    section.main {
        padding-top: 0;
        padding-bottom: 0;

        .container {
            .content {
                .post-item {
                    display: flex;
                    list-style: none;

                    .meta {
                        display: block;
                    }
                }
            }
        }
    }

    section.main.post {
        padding-top: @vspacing;
        padding-bottom: @vspacing;
    }
}

a {
    color: @accent;
    .transition(~'color @{transition-speed-1} @{in-sine}');

    &:hover {
        color: @link-hover;
    }
}

img {
    max-width: 100%;
}

img.profile {
    min-width:100%;
}

@media (min-width: @wide-1-breakpoint) {
  img.profile {
    min-width: 300px;
    max-width: 300px !important;
  }
}

.page-heading a {
    color: @black;
}
